<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>商品支付</title>
    <style>
        body{background:#f2f2f4;}
        body,html{width:100%;height:100%;}
        *,:after,:before{box-sizing:border-box;}
        *{margin:0;padding:0;}
        img{max-width:100%;}
        #header{height:60px;border-bottom:2px solid #eee;background-color:#fff;text-align:center;line-height:60px;}
        #header h1{font-size:20px;}
        #main{overflow:hidden;margin:0 auto;padding:20px;padding-top:80px;width:992px;max-width:100%;}
        #main .left{float:left;width:40%;box-shadow:0 0 60px #b5f1ff;}
        .left p{margin:10px auto;}
        .make{padding-top:15px;border-radius:10px;background-color:#fff;box-shadow:0 3px 3px 0 rgba(0,0,0,.05);color:#666;text-align:center;transition:all .2s linear;}
        .make .qrcode{margin:auto;}
        .make .money{margin-bottom:0;color:#f44336;font-weight:600;font-size:18px;}
        .info{padding:15px;width:100%;border-radius:0 0 10px 10px;background:#32343d;color:#f2f2f2;text-align:center;font-size:14px;}
        #main .right{float:right;padding-top:25px;width:60%;color:#ccc;text-align:center;}
        @media (max-width:768px){
            #main{padding-top:30px;}
            #main .left{width:100%;}
            #main .right{display:none;}
        }
    </style>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/css/QRCode.css">
    <script type="text/javascript" src="/static/js/clipboard.min.js"></script>
    <script type="text/javascript" src="/static/js/qrcode.js"></script>
    <script src="/static/js/layer.js"></script>
    <link type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
    <script type="text/javascript">


    </script>
</head>

<body>

<div id="main">
    <div class="left">
        <div class="make">
            <p><img src="/static/img/wxpay-logo.png" alt="" style="height:30px;"></p>
            <p>商户订单号：[[${orderCode}]]</p>
            <p class="money" id="price" style="font-weight:bold; color:green">订单金额：￥[[${amount}]]</p>
<center>
    <div id="qrcode">
        <img id="image"  style="display: block;">
        <h2>距离该订单过期还有</h2>
        <div class="time-item">
            <strong id="hour_show"><s id="h"></s>0时</strong>
            <strong id="minute_show"><s></s>0分</strong>
            <strong id="second_show"><s></s>0秒</strong>
        </div>
    </div></p>
</center>
<center>
    <a id="alipayh5url_1"></a>
    <a id="alipayh5url_2"></a>
</center>
<div class="info">
    <p><font color="#FF0000" size="+1">1、截图保存当前二维码至手机相册</font></p>
    <p><font color="#FF0000" size="+1">2、打开微信右上角扫一扫</font></p>
    <p><font color="#FF0000" size="+1">3、点相册，选择刚刚截图的二维码</font></p>
    <p><font color="#FF0000" size="+1">4、请在规定时间内付款，超时支付无法上分</font></p>

</div>

            <div class="panel-footer">
                <a onclick='copy()' th:data-clipboard-text="${payUrl}" id="copy_btn" class="btn  btn-primary btn-lg btn-block">复制跳转</a>
            </div>
</div>
</div>

</div>
</body>

<script type="text/javascript">
    var layer ;
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
        layer = layui.layer //弹层
    });
    var _AP = {}
    var ua = navigator.userAgent.toLowerCase();

    var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),

        isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),

        isAndroid = ua.match(/(Android)\s+([\d.]+)/);

    var isWeChat = /micromessenger/.test(ua);

    var noIntentTest = /aliapp|360 aphone|weibo|windvane|ucbrowser/.test(ua);
    var hasIntentTest = /chrome|samsung/.test(ua);
    var isAndroid = /android|adr/.test(ua) && !(/windows phone/.test(ua));
    var isIos = /iphone|ipad|ipod|ios|macintosh/.test(ua);
    var canIntent = !noIntentTest && hasIntentTest && isAndroid;

    // 确定浏览器类型
    var isChrome = false;
    var isWebview = false;
    if (ua.match(/(?:chrome|crios)\/([\d\.]+)/)) {
        isChrome = true;
        if (ua.match(/version\/[\d+\.]+\s*chrome/)) {
            isWebview = true;
        }
    }

    var isOriginalChrome = isAndroid && isChrome && !isWebview;
    window.isOriginalChrome = isOriginalChrome && canIntent;
    if (ua.indexOf('m353')>-1 && !noIntentTest) {
        canIntent = false;
    }

    // 安卓走iframe方式唤起
    if (ua.indexOf('android')>-1 && !noIntentTest) {
        canIntent = false;
    }
    var key = "&amp;";

    var url = '[[${payUrl}]]';
    var opentype = '[[${opentype}]]';

    debugger;
    var qrcode = "";
    var newUrl = url.replace(new RegExp(key, 'g'), "&");
    qrcode = newUrl;
    new QRCode(document.getElementById("qrcode"), {
        text: newUrl,
        width: 250,
        height: 250,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: 3
    });

    $(function () {
        var timer, minutes, seconds, ci, qi;
        //var intDiff = parseInt('<?php echo ($creation_time+300) - time();?>');//倒计时总秒数量
        timer = 299;
        ci = setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            $(".minutes b").text(minutes);
            $(".seconds b").text(seconds);
            if (--timer < 0) {
                $(".qrcode .expired").removeClass("hidden");
                $(".minutes b").text('00');
                $(".seconds b").text('00');
                $(".help").html('订单已过期,请重新提交');
                daoqi();
                clearInterval(ci);

            }
        }, 1000);
        if(opentype=='h5'){
            window.location.href = url;
        }

    });

    function daoqi() {

        layer.confirm("订单已过期,请重新提交", {
            icon: 2,
            title: '支付失败',
            btn: ['确认'] //按钮
        }, function () {

        });
    }

    function isMobile() {
        var userAgentInfo = navigator.userAgent;

        var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

        var mobile_flag = false;

        //根据userAgent判断是否是手机
        for (var v = 0; v < mobileAgents.length; v++) {
            if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                mobile_flag = true;
                break;
            }
        }

        var screen_width = window.screen.width;
        var screen_height = window.screen.height;

        //根据屏幕分辨率判断是否是手机
        if(screen_width < 500 && screen_height < 800){
            mobile_flag = true;
        }

        return mobile_flag;
    }

    function copy() {


        var clipboard = new ClipboardJS("#copy_btn");
        clipboard.on("success",function (element) {//复制成功的回调
            // console.info("复制成功，复制内容：    " + element.text);
            layer.alert("复制成功", {
                icon: 6,
                title: "信息",
                btn:['关闭']
            });
            layer.alert('复制成功,跳转到微信后发送链接点击支付！', {
                skin: 'layui-layer-molv' //样式类名  自定义样式
                ,closeBtn: 1    // 是否显示关闭按钮
                ,anim: 1 //动画类型
                ,btn: ['跳转支付','返回扫码'] //按钮
                ,icon: 6    // icon
                ,yes:function(){
                    window.location.href = "weixin://";
                },btn2:function(){

                }
            });
        });

        clipboard.on("error",function (element) {//复制失败的回调
            console.info(element);
        })
    }


</script>
</body>
</html>
